<style>
.tabNav {
    width:100%;
    height:44px;
    padding-left:131px;
    background-color: #fff;
    box-sizing: border-box;
    position: absolute;
    bottom:0;
    left:0;
    z-index: 10;
}

.tabNav ul {
    display: flex;
    flex-direction: row;
}

.tabNav ul li {
    color:#7485B1;
    font-size:16px;
    padding:10px 0;
    text-align: center;
    min-width:64px;
    border-bottom:2px solid transparent;
    margin-right:20px;
    cursor: pointer;
}

.tabNav ul li.cur  {
    border-bottom:2px solid #3577FB;
    color:#3577FB;
}
</style>
<template>
    <div class="tabNav">
        <ul>
            <li v-for="(item, index) in list" :key="index" :class="{'cur': item.type == curType }" @click="switchCur(item.type)">
                {{item.name}}
            </li>
        </ul>
    </div>
</template>

<script>

export default{
    props: ['list'],
    data(){
        return {

        }
    },
    methods: {
        switchCur(type) {
            this.curType = type
            this.$emit('setTabCur', type)
        }
    },

    computed:{
        curType() {
            return this.$store.state.creentTab
        }
    }

}
</script>
